import React, { Component } from 'react';
import LibraryBooksOutlinedIcon from '@material-ui/icons/LibraryBooksOutlined';
import './index.less'
import Goback from '@/components/Goback'
import Qa from '@/components/Practice/qa'
import { GetSubjectListApi } from '@/request/api'
import Danxuan from '@/components/Practice/danxuan'
import Duoxuan from '@/components/Practice/duoxuan'
import Panduan from '@/components/Practice/panduan'
import Biancheng from '@/components/Practice/biancheng'
import Tiankong from '@/components/Practice/tiankong'


// 手指触摸点
let startX = -1
// 手指松开点
let endX = -1
// 当前索引值
let liIndex = 0

export default class Practice extends Component {
  state = {
    ulLeft: 0,
    // 题目列表
    qaList: []
  }
  render() {
    return <div className='practice'>
      <div className="top">
        <LibraryBooksOutlinedIcon />
        <div className="top_index">
          {/* b是粗体文本标签 */}
          <b>{ Math.abs(liIndex) + 1 }</b>
          <span>/</span>
          <span>{this.state.qaList.length}</span>
        </div>
      </div>
      <ul className='subject' style={{ width: this.state.qaList.length * 100 + '%',left: this.state.ulLeft }}
        onTouchStart={this.handleTouchStart.bind(this)}
        onTouchMove={this.handleTouchMove.bind(this)}
        onTouchEnd={this.handleTouchEnd.bind(this)}>
        {this.state.qaList.map(item => (<li className='subject_li' key={item.id}>
          <Qa timu={item} actionCode={this.props.location.state.actionCode}/>
          <Danxuan timu={item} actionCode={this.props.location.state.actionCode}/>
          <Duoxuan timu={item} actionCode={this.props.location.state.actionCode}/>
          <Panduan timu={item} actionCode={this.props.location.state.actionCode}/>
          <Biancheng timu={item} actionCode={this.props.location.state.actionCode}/>
          <Tiankong timu={item} actionCode={this.props.location.state.actionCode}/>
        </li>))}
      </ul>
      <Goback/>
    </div>
  }
  componentDidMount() {
    let obj = this.props.location.state
    console.log('obj',obj);
    GetSubjectListApi(obj).then(res => {
      // console.log(res);
      if (res.errCode === 0) {
        this.setState({
          qaList: res.data
        })
      }
    })
  }
  // 手指触摸到屏幕 即开始点
  handleTouchStart(e) {
    // console.log('handleTouchStart',e);
    startX = e.touches[0].clientX
  }
  // 手指滑动
  handleTouchMove(e) {
    // console.log('handleTouchMove',e);
    endX = e.touches[0].clientX
  }
  // 手指离开屏幕 即结束点
  handleTouchEnd(e) {
    // console.log(e);
    let _this = this;
    // 获取滑动范围
    if (startX > -1 && endX > -1) {
      // 距离
      let distance = Math.abs(startX - endX)
      // 手指滑动大于50即，距离相差大于50px，即视为要滑动
      if (distance > 50) {
        // 判断左滑动还是右滑动
        // 往左滑动
        if (startX > endX) {
          liIndex--
          // index是不能超过数组的长度的
          if (Math.abs(liIndex) >= _this.state.qaList.length - 1) {
            liIndex = -_this.state.qaList.length+1
          }
          // 往右滑动
        } else {
          liIndex++
          if (liIndex >= 0) {
            liIndex = 0
          }
        }
        this.setState({ ulLeft: 100 * liIndex + '%' }, () => {
          startX = -1
          endX = -1
        })
      } else {
        return
      }
    }    
  }
}
